<template>
  <el-dialog :title="'选择会员'" :close-on-click-modal="false" :visible.sync="membervisible" :append-to-body="true">
    <div class="mod-config hotelmemberleveldetail">
      <el-form :inline="true">
        <el-form-item label="" v-if="isAuth('hotel:hotelseller:list')">
          <el-select multiple collapse-tags clearable style="width:180px;" v-model="sellerIds" filterable remote
            reserve-keyword @change="selectSeller" placeholder="商家名称" :remote-method="remoteMethod" :loading="loading">
            <el-option v-for="item in platformSeller" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

      </el-form>

      <!-- 数据表格 -->
      <el-table :data="dataList" border="" row-key="userId" v-loading="dataListLoading" @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column prop="sellerName" header-align="center" align="center" label="商家">
          <template slot-scope="scope">
            <span>{{ scope.row.sellerName ? scope.row.sellerName : '管理员' || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="img" header-align="center" align="center" label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.img" alt="" style="with:30px;height:30px" />
          </template>
        </el-table-column>
        <el-table-column prop="name" header-align="center" align="center" label="姓名">
          <template slot-scope="scope">
            <el-link style="color: #409eff;cursor: pointer;" type="primary">
              {{ scope.row.name?scope.row.name:'--' }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="tel" header-align="center" align="center" width="150" label="手机">
          <template slot-scope="scope">
            <span v-if="scope.row.tel">{{ scope.row.tel }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="gender" header-align="center" align="center" label="性别">
          <template slot-scope="scope">
            <span>{{ scope.row.gender == '1' ? '男' : '女' || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cardNo" header-align="center" align="center" width="200" label="卡号">
          <template slot-scope="scope">
            <span v-if="scope.row.cardNo">{{ scope.row.cardNo }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="id" header-align="center" align="center" label="是否本店会员">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.id" size="small">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
      </el-table-column> -->
        <el-table-column prop="levelName" header-align="center" align="center" label="会员类型">
          <template slot-scope="scope">
            <span v-if="scope.row.levelName">{{ scope.row.levelName }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="certificateNo" header-align="center" align="center" width="200" label="证件号">
          <template slot-scope="scope">
            <span v-if="scope.row.certificateNo">{{ scope.row.certificateNo }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>


        <el-table-column prop="birthday" header-align="center" align="center" label="生日" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.birthday">{{ scope.row.birthday }}</span>
            <span v-else>暂无</span>
          </template>
        </el-table-column>

        <el-table-column prop="createDate" header-align="center" align="center" width="200" label="创建时间"></el-table-column>
        <el-table-column prop="salesman" header-align="center" align="center" label="推荐员工">
          <template slot-scope="scope">
            <span v-if="scope.row.salesman">{{ scope.row.salesman }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="score" header-align="center" align="center" label="可用积分">
          <template slot-scope="scope">
            <span v-if="scope.row.score">{{ scope.row.score }}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column prop="balance" header-align="center" align="center" label="可用余额">
          <template slot-scope="scope">
            <span v-if="scope.row.balance">{{ scope.row.balance }}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalScore" header-align="center" align="center" label="累计积分">
          <template slot-scope="scope">
            <span v-if="scope.row.totalScore">{{ scope.row.totalScore }}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalBalance" header-align="center" align="center" label="累计余额">
          <template slot-scope="scope">
            <span v-if="scope.row.totalBalance">{{ scope.row.totalBalance }}</span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column prop="labelList" header-align="center" align="center" label="标签" width="200px">
          <template slot-scope="scope">
            <span v-if="scope.row.labelList">
              <el-tag v-for="(tag,index) in scope.row.labelEntityLists" :key="tag.id" @close="closeTag(scope.row.labelEntityLists,tag,index,scope.row.id)"
                :disable-transitions="false" closable>
                {{tag.name}}
              </el-tag>
            </span>
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column prop="groupName" header-align="center" align="center" label="分组">
          <template slot-scope="scope">
            <span v-if="scope.row.groupName">{{ scope.row.groupName }}</span>
            <span v-else>暂无</span>
          </template>
        </el-table-column>

        <el-table-column prop="source" header-align="center" align="center" label="来源">
          <template slot-scope="scope">
            <span v-if="scope.row.source">{{ scope.row.source }}</span>
            <span v-else>暂无</span>
          </template>
        </el-table-column>


        <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="selectXieYi(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>

    </div>
  </el-dialog>
</template>

<script>
  import Vue from 'vue';
  export default {
    data() {
      return {
        initItem: {},
        membervisible: false,
        otherDate: '',
        pickerOptions: {
          shortcuts: [{
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近半年',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                picker.$emit('pick', [start, end]);
              }
            }
          ]
        },
        shaixuan: false,
        setGroup: '',
        setLable: '',
        lableList: [],
        groupList: [],
        baobiaoshuju: {
          //今日有多少过生日的
          TodayBirthdayCounts: 0,
          //本月还有多少
          BirthdayOfThisMonthCounts: 0,
          //会员总数
          TotalMembership: 0,
          //平均每日新增会员
          AverageMemberNewCounts: 0,
          //累计消费金额
          CumulativeConsumption: 0.0,
          //今日已消费会员数
          TodayMemberConsumption: 0,
          //今日消费金额
          TodayConsumptionMoney: 0.0,
          //消费会员(TOP3)
          ConsumptionTopList: []
        },
        zhezhao: false,
        showAlert: false,
        loading: false,
        platformSeller: [],
        dataForm: {
          sellerId: '',
          name: '',
          mobile: '',
          //type 1今日过生日的会员   2本月还有多少过生日的会员
          type: '',
          source: '全部',
          groupId: 0,
          lableId: '全部',
          otherDate: '',
          expireDate: 0,
          LossDate: '全部',
          zidingyiLossDate: 1,
          levelid: 0,
        },
        tongjiBtnForm: {
          todayBathday: false,
          monthBathday: false,
          newAddMember: false,
          todayXiaoFeiMember: false,
        },
        sellerIds: [],
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        couponsSelectVisible: false,
        integralChangeVisible: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        memberDetailVisible: false,
        fileList: [],
        shujubaobiao: true,
        hotelmemberlevelList: [],
        pageCountMoney: 0,
        pageCountkfMoney: 0,
        pageCounttkMoney: 0,
        pageCountytMoney: 0,
      };
    },
    components: {

    },
    methods: {
      init(item) {
        this.initItem = item;
        this.membervisible = true;
        this.getDataList();
        this.getlableList();
        this.getgroupList();
        this.gethotelmemberlevelList();
        this.remoteMethod();
      },
      selectXieYi(row) {
        this.initItem.memberEntity.id = row.id
        this.initItem.memberEntity.name = row.name
        this.initItem.memberEntity.tel = row.tel
        this.initItem.memberEntity.levelName = row.levelName
        this.initItem.memberEntity.totalBalance = row.totalBalance
        this.initItem.memberEntity.totalScore = row.totalScore
        this.initItem.memberEntity.cardNo = row.cardJustNo
        this.$nextTick(() => {
          this.$forceUpdate()
          this.membervisible = false
          this.$emit('refreClosing')
        })
      },
      //关闭标签
      closeTag(obj, tag, index, id) {
        this.loading = true;
        obj.splice(obj.indexOf(tag), 1);
        // obj.splice(obj.indexOf(index), 1);
        // Vue.set(obj,index,false);
        //发送请求
        this.$http({
          url: this.$http.adornUrl(
            `/hotel/hotelmemberleveldetail/update`
          ),
          method: "post",
          data: this.$http.adornData({
            id: id,
            labelList: JSON.stringify(obj)
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
          } else {
            this.$message.error(data.msg);
          }
          this.loading = false;
        });
      },
      //获取会员等级
      gethotelmemberlevelList() {
        this.$http({
          url: this.$http.adornUrl("/hotel/hotelmemberlevel/list"),
          method: "get",
          params: this.$http.adornParams({
            page: 0,
            limit: 999
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.hotelmemberlevelList = data.page.list;
          } else {
            this.hotelmemberlevelList = [];
          }
        });
      },
      //改变分组
      changeGroup(value) {
        this.loading = true;
        this.$http({
          url: this.$http.adornUrl('/hotel/hotelmemberleveldetail/setGroup'),
          method: 'POST',
          data: this.$http.adornData({
            ids: this.dataListSelections.map(item => {
              return item.id;
            }),
            id: value
          })
        }).then(({
          data
        }) => {
          this.loading = false;
          if (data && data.code === 0) {
            this.$message({
              message: this.$t('Common.OperationSuccessful'),
              type: 'success'
            });
            this.setGroup = '';
            this.getDataList();
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      //改变标签
      changelable(value) {
        this.loading = true;
        this.$http({
          url: this.$http.adornUrl('/hotel/hotelmemberleveldetail/setLable'),
          method: 'POST',
          data: this.$http.adornData({
            ids: this.dataListSelections.map(item => {
              return item.id;
            }),
            id: value
          })
        }).then(({
          data
        }) => {
          this.loading = false;
          if (data && data.code === 0) {
            this.$message({
              message: this.$t('Common.OperationSuccessful'),
              type: 'success'
            });
            this.setLable = '';
            this.getDataList();
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      //获取标签列表
      getlableList() {
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelmemberlabel/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: 0,
            limit: 999
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.lableList = data.page.list;
          } else {
            this.lableList = [];
          }
        });
      },
      //获取分组列表
      getgroupList() {
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelmembergroup/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: 0,
            limit: 999
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.groupList = data.page.list;
          } else {
            this.groupList = [];
          }
        });
      },
      //获取视图数据
      getBaobiaoshuju() {
        this.$http({
          url: this.$http.adornUrl('/hotel/hotelmemberleveldetail/view_data'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.baobiaoshuju.TodayBirthdayCounts = data.TodayBirthdayCounts;
            this.baobiaoshuju.BirthdayOfThisMonthCounts = data.BirthdayOfThisMonthCounts;
            this.baobiaoshuju.AverageMemberNewCounts = data.AverageMemberNewCounts;
            this.baobiaoshuju.TodayMemberConsumption = data.TodayMemberConsumption;
            this.baobiaoshuju.TodayConsumptionMoney = data.TodayConsumptionMoney;
            this.baobiaoshuju.CumulativeConsumption = data.CumulativeConsumption;
            this.baobiaoshuju.ConsumptionTopList = data.ConsumptionTopList;
            this.baobiaoshuju.TotalMembership = data.TotalMembership;
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      //exportBtn导出
      exportBtn() {
        window.open(this.$http.adornUrl(`/hotel/hotelmemberleveldetail/excel_export`));
      },
      //模板下载
      excel_templateBtn() {
        window.open(this.$http.adornUrl(`/hotel/hotelmemberleveldetail/excel_template`));
      },
      //excel导入格式判断
      excel_import(file) {
        console.log(file);
        var type = file.type;
      },
      //导入回调
      importsuccess(response, file, fileList) {
        let that = this;
        if (response && response.code === 0) {
          this.$message({
            type: 'success',
            message: response.msg
          });
          this.getDataList();
        } else {
          this.$message({
            type: 'error',
            message: response.msg
          });
        }
      },
      // excel文件导入路径
      excel_import_url() {
        return this.$http.adornUrl(`/hotel/hotelmemberleveldetail/excel_import`);
      },
      selectSeller(id, value) {
        this.getDataList()
      },
      //加载平台商家数据
      remoteMethod(query) {
        if (this.isAuth('hotel:hotelseller:list')) {
          this.loading = true;
          this.$http({
            url: this.$http.adornUrl("/hotel/hotelseller/platformSeller"),
            method: "get",
            params: this.$http.adornParams({
              sellerName: query
            })
          }).then(({
            data
          }) => {
            this.loading = false;
            if (data && data.code === 0) {
              this.platformSeller = data.page.list;
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      },
      //清空筛选
      clearShaiXuan() {
        Object.assign(this.tongjiBtnForm, this.$options.data().tongjiBtnForm)
        Object.assign(this.dataForm, this.$options.data().dataForm)
        this.getDataList();
      },
      //今日消费会员
      todayXiaoFeiMember() {
        Object.assign(this.tongjiBtnForm, this.$options.data().tongjiBtnForm)
        this.tongjiBtnForm.todayXiaoFeiMember = true;
        this.getDataList();
      },
      //今日新增会员
      newAddMember() {
        Object.assign(this.tongjiBtnForm, this.$options.data().tongjiBtnForm)
        this.tongjiBtnForm.newAddMember = true;
        this.getDataList();
      },
      //本月还有几位过生日的
      monthBathday() {
        Object.assign(this.tongjiBtnForm, this.$options.data().tongjiBtnForm)
        this.tongjiBtnForm.monthBathday = true;
        this.getDataList();
      },
      //今日过生日的会员
      todayBathday() {
        Object.assign(this.tongjiBtnForm, this.$options.data().tongjiBtnForm)
        this.tongjiBtnForm.todayBathday = true;
        this.getDataList();
      },
      // 获取数据列表
      getDataList() {
        this.getBaobiaoshuju();
        if (this.dataForm.LossDate == 0) {
          if (!this.dataForm.zidingyiLossDate) {
            this.$message.error("客户流失距今天数不可为空或0");
            return
          }
        }
        this.dataListLoading = true;
        if (this.otherDate) {
          const start = Date.parse(new Date(this.otherDate[0])) / 1000;
          const end = Date.parse(new Date(this.otherDate[1])) / 1000;
          this.dataForm.otherDate = start + "," + end
          console.log(this.dataForm.otherDate)
        }
        var ids = ""
        if (this.sellerIds) {
          this.sellerIds.forEach((item, index) => {
            ids += item + ","
          })
          ids = ids.substring(0, ids.length - 1)
        }
        this.$http({
          url: this.$http.adornUrl('/hotel/hotelmemberleveldetail/shareList'),
          method: 'get',
          params: this.$http.adornParams({
            page: this.pageIndex,
            share:2,
            limit: this.pageSize,
            ...this.dataForm,
            ids: ids,
            ...this.tongjiBtnForm
          }),
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            console.log(data.page);
            this.dataList = data.page.records;
            this.totalPage = data.page.total;
            this.pageCountMoney = 0
            this.pageCountkfMoney = 0
            this.pageCounttkMoney = 0
            this.pageCountytMoney = 0
            this.dataList.forEach((item, index) => {
              this.pageCountMoney += item.score
              this.pageCountkfMoney += item.totalScore
              this.pageCounttkMoney += item.balance
              this.pageCountytMoney += item.totalBalance
            })
          } else {
            this.dataList = [];
            this.totalPage = 0;
          }
          this.dataListLoading = false;
        });
      },
      //批量排房
      batchRowRoomBtn() {

      },
      //批量入住
      batchRowRoomBtn() {

      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val;
      },
      //发放优惠券

      sendCouponsHandler(type) {
        this.couponsSelectVisible = true;
        this.$nextTick(() => {
          this.$refs.couponsSelect.init(type, this.dataListSelections);
        });
      },
      //办卡
      registerCardHandler() {
        this.addOrUpdateVisible = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init();
        });
      },
      //调整积分
      integralChangeBtn(id) {
        this.integralChangeVisible = true;
        this.$nextTick(() => {
          this.$refs.integralChange.init(id);
        });
      },
      //会员详情
      memberDetail(row) {
        this.memberDetailVisible = true;
        this.$nextTick(() => {
          this.$refs.memberDetail.init(row);
        });
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id);
        });
      },
      // 删除
      deleteHandle(id) {
        var ids = id ? [id] :
          this.dataListSelections.map(item => {
            return item.id;
          });
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/hotel/hotelmemberleveldetail/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        });
      }
    }
  };
</script>

<style>
  .hotelmemberleveldetail .zezhao {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: #000;
    opacity: 0.6;
    filter: alpha(opacity=60);
  }

  .hotelmemberleveldetail .showAlert {
    width: 700px;
    height: 450px;
    position: fixed;
    top: calc((100vh - 450px) / 2);
    left: calc((100vw - 700px) / 2);
    background: white;
    z-index: 999999;
    box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
  }

  .hotelmemberleveldetail .showAlert .alertHeader {
    text-align: center;
  }

  .hotelmemberleveldetail .showAlert .alertHeader p {
    display: inline-table;
  }

  .hotelmemberleveldetail .showAlert .alertHeader i {
    float: right;
    display: inline-table;
    font-size: 22px;
    line-height: 40px;
    margin-right: 8px;
    cursor: pointer;
  }

  .hotelmemberleveldetail .alertCon {
    width: 96%;
    margin: 0px auto;
    height: 60%;
  }

  .hotelmemberleveldetail .description {
    border: 1px solid #eaeaea;
    position: relative;
    width: 310px;
    padding: 10px;
    margin: auto;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    font-size: 14px;
  }

  .hotelmemberleveldetail li {
    list-style: none;
  }

  .hotelmemberleveldetail .description li.descriptionli {
    padding-bottom: 10px;
    line-height: 20px;
  }

  .hotelmemberleveldetail .description li.descriptionli .descriptionp {
    text-indent: 1em;
  }

  .hotelmemberleveldetail .description li.descriptionli .colorff {
    color: #f00;
  }

  .hotelmemberleveldetail .updownmemberlistbox {
    margin: auto;
    position: relative;
    width: 310px;
    height: 210px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  .hotelmemberleveldetail .updownmemberlistbox .col-xs-6 {
    height: 210px;
  }

  .hotelmemberleveldetail .col-xs-6 {
    float: left;
    width: 50%;
  }

  .hotelmemberleveldetail .updownmemberlistbox .downtemplate {
    width: 100%;
  }

  .hotelmemberleveldetail .updownmemberlistbox .downtemplate .templatestep {
    height: 50px;
    line-height: 50px;
    position: relative;
    text-align: center;
  }

  .hotelmemberleveldetail .updownmemberlistbox .downtemplate .templatecenter {
    height: 110px;
    position: relative;
  }

  .hotelmemberleveldetail .updownmemberlistbox .downtemplate .templatestep .step1 {
    display: block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    background-color: #f66;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
  }

  .hotelmemberleveldetail .updownmemberlistbox .downtemplate .templatecenter a {
    display: block;
    height: 110px;
    width: 125px;
  }

  .hotelmemberleveldetail .updownmemberlistbox .downtemplate .templatecenter img {
    position: absolute;
    border: none;
    display: block;
    width: 110px;
    height: 110px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: -1;
  }

  .memberreport {
    margin-bottom: 18px;
  }

  .memberreport .memberlistreport .memberreportsmbox {
    padding-left: 20px;
  }

  .memberreport .memberlistreport .center-footer-box {
    height: 36px;
    line-height: 30px;
    font-size: 12px;
    position: relative;
  }

  .memberreport .memberlistreport .memberreporttitle {
    padding-top: 3px;
    height: 30px;
    line-height: 30px;
    padding-right: 8px;
  }

  .memberreport .memberlistreport .center-footer-box .details {
    display: block;
    width: 38px;
    height: 20px;
    line-height: 19px;
    background-color: #07c9de;
    font-size: 12px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    position: absolute;
    right: 20px;
    top: 5px;
    transition: 0.35s;
  }

  .fr {
    float: right;
  }

  a {
    text-decoration: none;
  }

  .memberreport .memberlistreport .center-box {
    height: 90px;
    width: 100%;
    text-align: center;
    line-height: 90px;
    position: relative;
  }

  .amountcolor6 {
    color: #ff5400;
  }

  .memberreport .memberlistreport .membernumber {
    font-size: 34px;
  }

  .memberreport .memberlistreport .mumberunit {
    font-size: 18px;
  }

  .memberreport .memberlistreport .center-footer-box {
    height: 36px;
    line-height: 30px;
    font-size: 12px;
    position: relative;
  }

  .memberreport .memberlistreport .center-footer-box p {
    margin: 0;
    padding-right: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .memberreport .memberlistreport .center-footer-box .nembercolor {
    color: #ff5400;
    padding-left: 3px;
    padding-right: 3px;
  }

  .memberreport .memberlistreport .center-footer-box .details {
    display: block;
    width: 38px;
    height: 20px;
    line-height: 19px;
    background-color: #07c9de;
    font-size: 12px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    position: absolute;
    right: 20px;
    top: 5px;
    transition: 0.35s;
  }

  .memberreport .memberlistreport .memberreporttitle {
    padding-top: 3px;
    height: 30px;
    line-height: 30px;
    padding-right: 8px;
  }

  .fl {
    float: left;
  }

  .colorff {
    color: #f00;
  }

  .memberreport .memberlistreport .center-box {
    height: 90px;
    width: 100%;
    text-align: center;
    line-height: 90px;
    position: relative;
  }

  .memberreport .memberlistreport .center-footer-box {
    height: 36px;
    line-height: 30px;
    font-size: 12px;
    position: relative;
  }

  .memberreport .memberlistreport .center-footer-box .paright {
    padding-right: 0;
  }

  .memberreport .memberlistreport .center-footer-box p {
    margin: 0;
    padding-right: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .memberreport .memberlistreport .center-footer-box .nembercolor {
    color: #ff5400;
    padding-left: 3px;
    padding-right: 3px;
  }

  .memberreport .memberlistreport .memberreporttitle {
    padding-top: 3px;
    height: 30px;
    line-height: 30px;
    padding-right: 8px;
  }

  .memberreport .memberlistreport .center-box {
    height: 90px;
    width: 100%;
    text-align: center;
    line-height: 90px;
    position: relative;
  }

  .memberreport .memberlistreport .center-top-box {
    height: 90px;
    width: 100%;
  }

  .memberreport .memberlistreport .center-top-box li {
    width: 100%;
    height: 30px;
    overflow: hidden;
    margin: 0;
  }

  .memberreport .memberlistreport .top-list {
    height: 30px;
    line-height: 30px;
  }

  .memberreport .memberlistreport .membertopname {
    display: block;
  }

  .memberreport .memberlistreport .center-top-box li .membertopmoney {
    height: 30px;
  }

  .memberreport .memberlistreport .center-top-box li .money {
    font-size: 20px;
    color: #ff5400;
  }

  .pad {
    padding-left: 2px;
    padding-right: 2px;
  }
</style>
